<template>
  <div v-loading="loading">
    <el-table
      border
      :data="boxTable"
    >
      <el-table-column
        prop="boxId"
        label="箱唛"
        min-width="150"
        align="center"
      >
        <template v-slot="{row}">
          {{row.boxId}}
        </template>
      </el-table-column>
      <el-table-column
        prop="boxType"
        label="货箱类型"
        min-width="100"
        align="center"
      >
        <template v-slot="{row}">
          {{getBoxTypeStr(row.boxType)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsId"
        :label="$t('table.ListingIDAndSKU')"
        min-width="200"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.isTB">
            {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
          </template>
          <template v-else-if="row.isSystemLabel">
            {{ $t('shipment.System label') }} ({{row.sku}})
          </template>
          <template v-else>
            {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
          </template>
        </template>
      </el-table-column>
      <m-l-code-column></m-l-code-column>
      <el-table-column
        prop="exGoodsNum"
        label="数量"
        min-width="180"
        align="center"
      >
      </el-table-column>
    </el-table>
    <div class="page-wrap">
      <el-pagination
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import MLCodeColumn from "@/views/stock/components/MLCodeColumn";
import {getBoxStock} from "@/api/stock";
import {getBoxTypeStr} from "@/utils/boxLabel";

export default {
  name: "BoxLabelTable",
  components: {MLCodeColumn},
  props: {
    suitId: {
      type: [Number, String],
      required: true,
    },
    boxType: {
      type: String,
      required: true,
    },
    warehouseId: {
      type: [Number, String],
      required: true,
    }
  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      boxTable: [],
    }
  },
  watch: {
    boxType(){
      this.queryParams.page = 1;
      this.getData()
    },
    warehouseId(){
      this.queryParams.page = 1;
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getBoxTypeStr,
    getData(){
      this.loading = true;
      getBoxStock({
        suitId: this.suitId,
        boxType: this.boxType,
        page: this.queryParams.page,
        pageSize: this.queryParams.pageSize,
        warehouseId: this.warehouseId,
      })
        .then(res=>{
          this.loading = false
          this.boxTable = res.data
          this.total = res.info.total
        })
    },
  }
}
</script>


<style scoped lang="scss">

</style>
